<template>
  <div class="target">
    <div>
      <div class="title">
        <img src="~@img/project/icon-xmjdtj.png" alt="" />
        <span>签约项目金额完成率</span>
      </div>
      <div class="charts" ref="chart1"></div>
      <div class="bottom-text">
        <p>
          <span class="dis">{{ chartData1.district }}</span
          ><span class="fang bgc1"></span
          ><span>完成情况{{ chartData1.finnish }}亿</span
          ><span>目标任务{{ chartData1.aim }}亿</span>
        </p>
      </div>
    </div>
    <div>
      <div class="title">
        <img src="~@img/project/icon-xmjdtj.png" alt="" />
        <span>项目开工率</span>
      </div>
      <div class="charts" ref="chart2"></div>
      <div class="bottom-text">
        <p>
          <span class="dis">{{ chartData2.district }}</span
          ><span class="fang bgc2"></span
          ><span>已开工项目数{{ chartData2.finnish }}个</span
          ><span>已签约项目数{{ chartData2.aim }}个</span>
        </p>
      </div>
    </div>
    <div>
      <div class="title">
        <img src="~@img/project/icon-xmjdtj.png" alt="" />
        <span>开工项目计划投资额完成率</span>
      </div>
      <div class="charts" ref="chart3"></div>
      <div class="bottom-text">
        <p>
          <span class="dis">{{ chartData3.district }}</span
          ><span class="fang bgc3"></span
          ><span>完成情况{{ chartData3.finnish }}亿</span
          ><span>目标任务{{ chartData3.aim }}亿</span>
        </p>
      </div>
    </div>
    <div>
      <div class="title">
        <img src="~@img/project/icon-xmjdtj.png" alt="" />
        <span>固投项目资金到位完成率</span>
      </div>
      <div class="charts" ref="chart4"></div>
      <div class="bottom-text">
        <p>
          <span class="dis">{{ chartData4.district }}</span
          ><span class="fang bgc4"></span
          ><span>完成情况{{ chartData4.finnish }}亿</span
          ><span>目标任务{{ chartData4.aim }}亿</span>
        </p>
      </div>
    </div>
    <div>
      <div class="title">
        <img src="~@img/project/icon-xmjdtj.png" alt="" />
        <span>非固投项目资金到位完成率</span>
      </div>
      <div class="charts" ref="chart5"></div>
      <div class="bottom-text">
        <p>
          <span class="dis">{{ chartData5.district }}</span
          ><span class="fang bgc5"></span
          ><span>完成情况{{ chartData5.finnish }}亿</span
          ><span>目标任务{{ chartData5.aim }}亿</span>
        </p>
      </div>
    </div>
     <!-- <div>
     <div class="title">
        <img src="~@img/project/icon-xmjdtj.png" alt="" />
        <span>项目投产个数完成率</span>
      </div>
      <div class="charts" ref="chart6"></div>
      <div class="bottom-text">
        <p>
          <span class="dis">{{ chartData6.district }}</span
          ><span class="fang bgc6"></span
          ><span>已投产项目数{{ chartData6.finnish }}个</span
          ><span>目标任务{{ chartData6.aim }}个</span>
        </p>
      </div>
    </div> -->
  </div>
</template>
<script>
import { StatisticAnalysis } from "@/api/project_three";
import "echarts-liquidfill/src/liquidFill.js";
export default {
  data() {
    return {
      chart1: null,
      chart2: null,
      chart3: null,
      chart4: null,
      chart5: null,
      chart6: null,
      chartData1: {
        district: this.district,
        aim: 0,
        finnish: 0,
        rate: 0,
        ty_aim: 0,
        ty_finnish: 0,
        ty_rate: 0,
      },
      chartData2: {
        district: this.district,
        aim: 0,
        finnish: 0,
        rate: 0,
        ty_aim: 0,
        ty_finnish: 0,
        ty_rate: 0,
      },
      chartData3: {
        district: this.district,
        aim: 0,
        finnish: 0,
        rate: 0,
        ty_aim: 0,
        ty_finnish: 0,
        ty_rate: 0,
      },
      chartData4: {
        district: this.district,
        aim: 0,
        finnish: 0,
        rate: 0,
        ty_aim: 0,
        ty_finnish: 0,
        ty_rate: 0,
      },
      chartData5: {
        district: this.district,
        aim: 0,
        finnish: 0,
        rate: 0,
        ty_aim: 0,
        ty_finnish: 0,
        ty_rate: 0,
      },
      chartData6: {
        district: this.district,
        aim: 0,
        finnish: 0,
        rate: 0,
        ty_aim: 0,
        ty_finnish: 0,
        ty_rate: 0,
      },
    };
  },
  props: ["district"],
  watch: {
    district(newV, oldV) {
      console.log(newV);
      this.getData1();
      this.getData2();
      this.getData3();
      this.getData4();
      this.getData5();
      this.getData6();
    },
  },
  mounted() {
    console.log(this.district);
    this.initChart1();
    this.initChart2();
    this.initChart3();
    this.initChart4();
    this.initChart5();
    // this.initChart6();
    this.getData1();
    this.getData2();
    this.getData3();
    this.getData4();
    this.getData5();
    // this.getData6();
  },
  methods: {
    async getData1() {
      let res = await StatisticAnalysis({ district: this.district, flag: 1 });
      if (res.code && res.code != 0) {
        this.chartData1 = {
          district: this.district,
          aim: 0,
          finnish: 0,
          rate: 0,
          time: "",
          ty_aim: 0,
          ty_finnish: 0,
          ty_rate: 0,
        };
      } else {
        this.chartData1 = res;
      }
      this.$emit("sendTime", this.chartData1.time);
      this.upDataChart(1, this.chartData1);
    },
    async getData2() {
      let res = await StatisticAnalysis({ district: this.district, flag: 2 });
      if (res.code && res.code != 0) {
        this.chartData2 = {
          district: this.district,
          aim: 0,
          finnish: 0,
          rate: 0,
          ty_aim: 0,
          ty_finnish: 0,
          ty_rate: 0,
        };
      } else {
        this.chartData2 = res;
      }
      this.upDataChart(2, this.chartData2);
    },
    async getData3() {
      let res = await StatisticAnalysis({ district: this.district, flag: 3 });
      if (res.code && res.code != 0) {
        this.chartData3 = {
          district: this.district,
          aim: 0,
          finnish: 0,
          rate: 0,
          ty_aim: 0,
          ty_finnish: 0,
          ty_rate: 0,
        };
      } else {
        this.chartData3 = res;
      }
      this.upDataChart(3, this.chartData3);
    },
    async getData4() {
      let res = await StatisticAnalysis({ district: this.district, flag: 4 });
      if (res.code && res.code != 0) {
        this.chartData4 = {
          district: this.district,
          aim: 0,
          finnish: 0,
          rate: 0,
          ty_aim: 0,
          ty_finnish: 0,
          ty_rate: 0,
        };
      } else {
        this.chartData4 = res;
      }
      this.upDataChart(4, this.chartData4);
    },
    async getData5() {
      let res = await StatisticAnalysis({ district: this.district, flag: 5 });
      if (res.code && res.code != 0) {
        this.chartData5 = {
          district: this.district,
          aim: 0,
          finnish: 0,
          rate: 0,
          ty_aim: 0,
          ty_finnish: 0,
          ty_rate: 0,
        };
      } else {
        this.chartData5 = res;
      }
      this.upDataChart(5, this.chartData5);
    },
    async getData6() {
      let res = await StatisticAnalysis({ district: this.district, flag: 6 });
      if (res.code && res.code != 0) {
        this.chartData6 = {
          district: this.district,
          aim: 0,
          finnish: 0,
          rate: 0,
          ty_aim: 0,
          ty_finnish: 0,
          ty_rate: 0,
        };
      } else {
        this.chartData6 = res;
      }
      this.upDataChart(6, this.chartData6);
    },
    initChart1() {
      this.chart1 = this.$echarts.init(this.$refs.chart1);
      let option = {
        color: [
          "#fee5d7",
          new this.$echarts.graphic.LinearGradient(
            0,
            0,
            0,
            1,
            [
              {
                offset: 0,
                color: "#ff8075",
              },
              {
                offset: 1,
                color: "#fd9865",
              },
            ],
            false
          ),
        ],
        grid: {
          bottom: "10%",
          top: "10%",
        },
        title: {
          top: "center",
          left: "center",
          textStyle: {
            fontSize: 24,
            color: "#FF8175",
            fontWeight: "bold",
            fontFamily: "Microsoft YaHei",
          },
        },
        series: [
          {
            bottom: "9%",
            top: "9%",
            name: "总进度",
            type: "pie",
            center: ["50%", "50%"],
            radius: ["60%", "90%"],
            itemStyle: {
              borderColor: "#fff",
              borderWidth: 2,
            },
            label: {
              show: false,
              position: "center",
            },

            silent: true,
            labelLine: {
              show: false,
            },
          },
          {
            bottom: "9%",
            top: "9%",
            name: "已完成",
            type: "pie",
            center: ["50%", "50%"],
            radius: ["60%", "90%"],
            itemStyle: {
              borderRadius: [0, 100, 0, 100],
            },
            silent: true,
            label: {
              show: false,
              position: "center",
            },
          },
          {
            name: "已完成",
            bottom: "9%",
            top: "9%",
            type: "pie",
            center: ["50%", "50%"],
            radius: ["60%", "90%"],
            itemStyle: {
              borderRadius: [0, 100, 0, 100],
              color: "rgba(0,0,0,0)",
            },
            silent: true,
            label: {
              show: false,
              position: "center",
            },
          },
          {
            name: "我是白线",
            bottom: "9%",
            top: "9%",
            type: "pie",
            radius: ["60%", "90%"],
            silent: true,
            clockwise: true,
            startAngle: 90, // 白线位置
            z: 99,
            zlevel: 99,
            label: {
              show: false,
              position: "center",
            },
          },
        ],
      };
      this.chart1.setOption(option);
    },
    initChart2() {
      this.chart2 = this.$echarts.init(this.$refs.chart2);
      let option = {
        color: [
          "#d8f1ef",
          new this.$echarts.graphic.LinearGradient(
            0,
            0,
            0,
            1,
            [
              {
                offset: 0,
                color: "#18C7B8",
              },
              {
                offset: 1,
                color: "#19D0B2",
              },
            ],
            false
          ),
        ],
        title: {
          top: "center",
          left: "center",
          textStyle: {
            fontSize: 24,
            color: "#18C7B8",
            fontWeight: "bold",
            fontFamily: "Microsoft YaHei",
          },
        },
        series: [
          {
            bottom: "9%",
            top: "9%",
            name: "总进度",
            type: "pie",
            center: ["50%", "50%"],
            radius: ["60%", "90%"],
            itemStyle: {
              borderColor: "#fff",
              borderWidth: 2,
            },
            label: {
              show: false,
              position: "center",
            },

            silent: true,
            labelLine: {
              show: false,
            },
          },
          {
            bottom: "9%",
            top: "9%",
            name: "已完成",
            type: "pie",
            center: ["50%", "50%"],
            radius: ["60%", "90%"],
            itemStyle: {
              borderRadius: [0, 100, 0, 100],
            },
            silent: true,
            label: {
              show: false,
              position: "center",
            },
          },
          {
            bottom: "9%",
            top: "9%",
            name: "已完成",
            type: "pie",
            center: ["50%", "50%"],
            radius: ["60%", "90%"],
            itemStyle: {
              borderRadius: [0, 100, 0, 100],
              color: "rgba(0,0,0,0)",
            },
            silent: true,
            label: {
              show: false,
              position: "center",
            },
          },
          {
            bottom: "9%",
            top: "9%",
            name: "我是白线",
            type: "pie",
            radius: ["50%", "55%"],
            radius: ["60%", "90%"],
            silent: true,
            clockwise: true,
            startAngle: 90, // 白线位置
            z: 99,
            zlevel: 99,
          },
        ],
      };
      this.chart2.setOption(option);
    },
    initChart3() {
      this.chart3 = this.$echarts.init(this.$refs.chart3);
      // let option = {
      //   color: [
      //     "#e5f0ff",
      //     new this.$echarts.graphic.LinearGradient(
      //       0,
      //       0,
      //       0,
      //       1,
      //       [
      //         {
      //           offset: 0,
      //           color: "#56A6FF",
      //         },
      //         {
      //           offset: 1,
      //           color: "#8CC2FF",
      //         },
      //       ],
      //       false
      //     ),
      //   ],
      //   title: {
      //     top: "center",
      //     left: "center",
      //     textStyle: {
      //       fontSize: 24,
      //       color: "#fff",
      //       fontWeight: "bold",
      //       fontFamily: "Microsoft YaHei",
      //     },
      //   },
      //   series: [
      //     {
      //       radius: "80%",
      //       type: "liquidFill",
      //       data: [0.6],
      //       label: {
      //         show: false,
      //       },
      //       color: [
      //         new this.$echarts.graphic.LinearGradient(
      //           0,
      //           0,
      //           0,
      //           1,
      //           [
      //             {
      //               offset: 0,
      //               color: "#56A6FF",
      //             },
      //             {
      //               offset: 1,
      //               color: "#8CC2FF",
      //             },
      //           ],
      //           false
      //         ),
      //       ],

      //       backgroundStyle: {
      //         borderWidth: 2,

      //         borderColor: "#60ABFF",

      //         color: "rgba(96, 171, 255,0.2)",
      //       },

      //       outline: {
      //         borderDistance: 0,

      //         itemStyle: {
      //           borderColor: "rgba(96, 171, 255,0.2)",

      //           borderWidth: 9,
      //         },
      //       },
      //     },
      //   ],
      // };
      let option = {
        color: [
          "#e4f1ff",
          new this.$echarts.graphic.LinearGradient(
            0,
            0,
            0,
            1,
            [
              {
                offset: 0,
                color: "#56a6ff ",
              },
              {
                offset: 1,
                color: "#8cc2ff",
              },
            ],
            false
          ),
        ],
        title: {
          top: "center",
          left: "center",
          textStyle: {
            fontSize: 24,
            color: "#56a6ff",
            fontWeight: "bold",
            fontFamily: "Microsoft YaHei",
          },
        },
        series: [
          {
            bottom: "9%",
            top: "9%",
            name: "总进度",
            type: "pie",
            center: ["50%", "50%"],
            radius: ["60%", "90%"],
            itemStyle: {
              borderColor: "#fff",
              borderWidth: 2,
            },
            label: {
              show: false,
              position: "center",
            },

            silent: true,
            labelLine: {
              show: false,
            },
          },
          {
            bottom: "9%",
            top: "9%",
            name: "已完成",
            type: "pie",
            center: ["50%", "50%"],
            radius: ["60%", "90%"],
            itemStyle: {
              borderRadius: [0, 100, 0, 100],
            },
            silent: true,
            label: {
              show: false,
              position: "center",
            },
          },
          {
            bottom: "9%",
            top: "9%",
            name: "已完成",
            type: "pie",
            center: ["50%", "50%"],
            radius: ["60%", "90%"],
            itemStyle: {
              borderRadius: [0, 100, 0, 100],
              color: "rgba(0,0,0,0)",
            },
            silent: true,
            label: {
              show: false,
              position: "center",
            },
          },
          {
            bottom: "9%",
            top: "9%",
            name: "我是白线",
            type: "pie",
            radius: ["50%", "55%"],
            radius: ["60%", "90%"],
            silent: true,
            clockwise: true,
            startAngle: 90, // 白线位置
            z: 99,
            zlevel: 99,
            label: {
              show: false,
              position: "center",
            },
          },
        ],
      };
      this.chart3.setOption(option);
    },
    initChart4() {
      this.chart4 = this.$echarts.init(this.$refs.chart4);
      let option = {
        color: [
          "#f3d8fe",
          new this.$echarts.graphic.LinearGradient(
            0,
            0,
            0,
            1,
            [
              {
                offset: 0,
                color: "#B275FF",
              },
              {
                offset: 1,
                color: "#CF63FF",
              },
            ],
            false
          ),
        ],
        title: {
          top: "center",
          left: "center",
          textStyle: {
            fontSize: 24,
            color: "#B275FF",
            fontWeight: "bold",
            fontFamily: "Microsoft YaHei",
          },
        },
        series: [
          {
            bottom: "9%",
            top: "9%",
            name: "总进度",
            type: "pie",
            center: ["50%", "50%"],
            radius: ["60%", "90%"],
            itemStyle: {
              borderColor: "#fff",
              borderWidth: 2,
            },
            label: {
              show: false,
              position: "center",
            },

            silent: true,
            labelLine: {
              show: false,
            },
          },
          {
            name: "已完成",
            bottom: "9%",
            top: "9%",
            type: "pie",
            center: ["50%", "50%"],
            radius: ["60%", "90%"],
            itemStyle: {
              borderRadius: [0, 100, 0, 100],
            },
            silent: true,
            label: {
              show: false,
              position: "center",
            },
          },
          {
            bottom: "9%",
            top: "9%",
            name: "已完成",
            type: "pie",
            center: ["50%", "50%"],
            radius: ["60%", "90%"],
            itemStyle: {
              borderRadius: [0, 100, 0, 100],
              color: "rgba(0,0,0,0)",
            },
            silent: true,
            label: {
              show: false,
              position: "center",
            },
          },
          {
            bottom: "9%",
            top: "9%",
            name: "我是白线",
            type: "pie",
            radius: ["50%", "55%"],
            radius: ["60%", "90%"],
            silent: true,
            clockwise: true,
            startAngle: 90, // 白线位置
            z: 99,
            zlevel: 99,
            label: {
              show: false,
              position: "center",
            },
          },
        ],
      };
      this.chart4.setOption(option);
    },
    initChart5() {
      this.chart5 = this.$echarts.init(this.$refs.chart5);
      let option = {
        color: [
          "#e0d7ff",
          new this.$echarts.graphic.LinearGradient(
            0,
            0,
            0,
            1,
            [
              {
                offset: 0,
                color: "#747DFF",
              },
              {
                offset: 1,
                color: "#8165FD",
              },
            ],
            false
          ),
        ],
        title: {
          top: "center",
          left: "center",
          textStyle: {
            fontSize: 24,
            color: "#747DFF",
            fontWeight: "bold",
            fontFamily: "Microsoft YaHei",
          },
        },
        series: [
          {
            bottom: "9%",
            top: "9%",
            name: "总进度",
            type: "pie",
            center: ["50%", "50%"],
            radius: ["60%", "90%"],
            itemStyle: {
              borderColor: "#fff",
              borderWidth: 2,
            },
            label: {
              show: false,
              position: "center",
            },

            silent: true,
            labelLine: {
              show: false,
            },
          },
          {
            bottom: "9%",
            top: "9%",
            name: "已完成",
            type: "pie",
            center: ["50%", "50%"],
            radius: ["60%", "90%"],
            itemStyle: {
              borderRadius: [0, 100, 0, 100],
            },
            silent: true,
            label: {
              show: false,
              position: "center",
            },
          },
          {
            name: "已完成",
            bottom: "9%",
            top: "9%",
            type: "pie",
            center: ["50%", "50%"],
            radius: ["60%", "90%"],
            itemStyle: {
              borderRadius: [0, 100, 0, 100],
              color: "rgba(0,0,0,0)",
            },
            silent: true,
            label: {
              show: false,
              position: "center",
            },
          },
          {
            bottom: "9%",
            top: "9%",
            name: "我是白线",
            type: "pie",
            radius: ["50%", "55%"],
            radius: ["60%", "90%"],
            silent: true,
            clockwise: true,
            startAngle: 90, // 白线位置
            z: 99,
            zlevel: 99,
            label: {
              show: false,
              position: "center",
            },
          },
        ],
      };
      this.chart5.setOption(option);
    },
    initChart6() {
      this.chart6 = this.$echarts.init(this.$refs.chart6);
      let option = {
        color: [
          "#ffdae5",
          new this.$echarts.graphic.LinearGradient(
            0,
            0,
            0,
            1,
            [
              {
                offset: 0,
                color: "#FF75BF",
              },
              {
                offset: 1,
                color: "#FD6692",
              },
            ],
            false
          ),
        ],
        title: {
          top: "center",
          left: "center",
          textStyle: {
            fontSize: 24,
            color: "#FF75BF",
            fontWeight: "bold",
            fontFamily: "Microsoft YaHei",
          },
        },
        series: [
          {
            bottom: "9%",
            top: "9%",
            name: "总进度",
            type: "pie",
            center: ["50%", "50%"],
            radius: ["60%", "90%"],
            itemStyle: {
              borderColor: "#fff",
              borderWidth: 2,
            },
            label: {
              show: false,
              position: "center",
            },

            silent: true,
            labelLine: {
              show: false,
            },
          },
          {
            bottom: "9%",
            top: "9%",
            name: "已完成",
            type: "pie",
            center: ["50%", "50%"],
            radius: ["60%", "90%"],
            itemStyle: {
              borderRadius: [0, 100, 0, 100],
            },
            silent: true,
            label: {
              show: false,
              position: "center",
            },
          },
          {
            bottom: "9%",
            top: "9%",
            name: "已完成",
            type: "pie",
            center: ["50%", "50%"],
            radius: ["60%", "90%"],
            itemStyle: {
              borderRadius: [0, 100, 0, 100],
              color: "rgba(0,0,0,0)",
            },
            silent: true,
            label: {
              show: false,
              position: "center",
            },
          },
          {
            bottom: "9%",
            top: "9%",
            name: "我是白线",
            type: "pie",
            radius: ["50%", "55%"],
            radius: ["60%", "90%"],
            silent: true,
            clockwise: true,
            startAngle: 90, // 白线位置
            z: 99,
            zlevel: 99,
            label: {
              show: false,
              position: "center",
            },
          },
        ],
      };
      this.chart6.setOption(option);
    },
    upDataChart(type, data) {
      console.log(data);
      let chart = null;
      let fontSize = 24;
      let colorListByText = [
        "#9b3d2b",
        "#0c5d52",
        "#255b98",
        "#5d1e8e",
        "#161861",
        "#8c1646",
      ];
      let color = null;
      switch (type) {
        case 1:
          chart = this.chart1;
          color = colorListByText[0];
          break;
        case 2:
          chart = this.chart2;
          color = colorListByText[1];

          break;
        case 3:
          chart = this.chart3;
          color = colorListByText[2];

          break;
        case 4:
          chart = this.chart4;
          color = colorListByText[3];

          break;
        case 5:
          chart = this.chart5;
          color = colorListByText[4];

          break;
        case 6:
          chart = this.chart6;
          color = colorListByText[5];
          break;
        default:
          break;
      }
      if (document.body.offsetWidth < 1530) {
        fontSize = 18;
      }
      if (this.district == "太原市") {
        chart.setOption({
          title: {
            text: data.rate + "%",
            textStyle: {
              fontSize,
            },
          },
          series: [
            {
              data: [{ value: data.aim == 0 ? 1 : data.aim, name: "目标任务" }],
            },
            {
              data: [
                {
                  value: data.ty_finnish,
                  name: "完成情况",
                  label: {
                    show: false,
                    formatter: data.ty_rate + "%",
                  },
                },
                {
                  value:
                    data.ty_aim == 0
                      ? 1
                      : data.ty_aim - data.ty_finnish < 0
                      ? 0
                      : data.ty_aim - data.ty_finnish,
                  name: "未完成",
                  label: {
                    show: false,
                    formatter: data.ty_rate + "%",
                  },
                },
              ],
            },
            {
              data: [],
            },
            {
              data: [],
            },
          ],
        });
      } else {
        chart.setOption({
          title: {
            text: data.rate + "%",
          },
          series: [
            {
              data: [{ value: data.aim == 0 ? 1 : data.aim, name: "目标任务" }],
            },
            {
              data: [
                {
                  value: data.finnish,
                  name: "完成情况",
                  label: {
                    show: false,
                    formatter: data.rate + "%",
                  },
                },
                {
                  value:
                    data.aim == 0
                      ? 1
                      : data.aim - data.finnish < 0
                      ? 0
                      : data.aim - data.finnish,
                  name: "未完成",
                  label: {
                    show: false,
                    formatter: data.rate + "%",
                  },
                },
              ],
            },
            {
              data: [
                {
                  value: data.ty_finnish,
                  name: "完成情况",
                  label: {
                    show: false,
                    position: "outside",
                    formatter: data.ty_rate + "%",
                  },
                  itemStyle: {
                    color: "rgba(0,0,0,0)",
                    // color: color,
                  },
                  labelLine: {
                    show: false,
                  },
                },
                {
                  value:
                    data.ty_aim == 0
                      ? 0
                      : data.ty_aim - data.ty_finnish < 0
                      ? 0
                      : data.ty_aim - data.ty_finnish,
                  name: "未完成",
                  label: {
                    show: false,
                    formatter: data.ty_rate + "%",
                  },
                },
              ],
            },
            {
              startAngle: -270 - (data.ty_rate / 100) * 360, // 白线位置
              avoidLabelOverlap: true,
              data: [
                {
                  value: 1,
                  itemStyle: {
                    color: color,
                  },
                  labelLine: {
                    show: true,
                    length: 10,
                    length2: 10,
                    lineStyle: {
                      width: 1,
                      color: color,
                    },
                  },

                  label: {
                    show: true,
                    position: "outside",
                    color: color,
                    formatter:
                      "{title| 全市}" +
                      "\n\r" +
                      "{hr| }" +
                      "\n\r" +
                      "{num|" +
                      data.ty_rate +
                      "%" +
                      "}",
                    rich: {
                      title: {
                        color: color,
                        fontSize: 14,
                        align: "center",
                      },
                      hr: {
                        borderColor: color,
                        width: "100%",
                        borderWidth: 1,
                        height: 0,
                      },
                      num: {
                        color: color,
                        fontSize: 14,
                        align: "center",
                      },
                    },
                  },
                },
                {
                  value: 100 - 1,
                  label: {
                    show: false,
                  },
                  itemStyle: {
                    color: "transparent",
                  },
                },
              ],
            },
          ],
        });
      }
    },
  },
};
</script>
<style lang="less" scoped>
.target {
  width: 100%;
  // height: 100%;
  height: calc(100vh - 240px);
  display: grid;
  grid-template-rows: repeat(2, 1fr);
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 20px 30px;
}
.target > div {
  box-sizing: border-box;
  padding: 20px;
  background: #ffffff;
  box-shadow: 0px 0px 9px 0px rgba(189, 189, 189, 0.67);
  border-radius: 10px;
  text-align: left;
  img {
    margin-right: 10px;
    width: 18px;
    height: 18px;
    vertical-align: middle;
  }
  span {
    font-size: 18px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #333333;
    vertical-align: middle;
  }
}
.bottom-text {
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #333333;
  text-align: left;
  p {
    text-align: center;
    span {
      vertical-align: middle;
      font-size: 14px;
      font-weight: 400;
      color: #666;
      margin: 0 8px;
    }
    span.fang {
      display: inline-block;
      width: 30px;
      height: 18px;
      background: inherit;

      border-radius: 6px;
    }
    span.fang.bgc1 {
      background: linear-gradient(0deg, #ff8075 0%, #fd9865 100%);
    }
    span.fang.bgc2 {
      background: linear-gradient(0deg, #18c7b8 0%, #19d0b2 100%);
    }
    span.fang.bgc3 {
      background: linear-gradient(0deg, #56a6ff 0%, #8cc2ff 100%);
    }
    span.fang.bgc4 {
      background: linear-gradient(0deg, #b275ff 0%, #cf63ff 100%);
    }
    span.fang.bgc5 {
      background: linear-gradient(0deg, #747dff 0%, #8165fd 100%);
    }
    span.fang.bgc6 {
      background: linear-gradient(0deg, #ff75bf 0%, #fd6692 100%);
    }

    span.fang.bgc11 {
      background: linear-gradient(
        0deg,
        rgba(255, 128, 117, 0.6) 0%,
        rgba(253, 152, 101, 0.6) 100%
      );
    }
    span.fang.bgc22 {
      background: linear-gradient(
        0deg,
        rgba(24, 199, 184, 0.6) 0%,
        rgba(25, 208, 178, 0.6) 100%
      );
    }
    span.fang.bgc33 {
      background: linear-gradient(
        0deg,
        rgba(86, 166, 255, 0.6) 0%,
        rgba(140, 194, 255, 0.6) 100%
      );
    }
    span.fang.bgc44 {
      background: linear-gradient(
        0deg,
        rgba(178, 117, 255, 0.6) 0%,
        rgba(207, 99, 255, 0.6) 100%
      );
    }
    span.fang.bgc55 {
      background: linear-gradient(
        0deg,
        rgba(116, 125, 255, 0.6) 0%,
        rgba(129, 101, 253, 0.6) 100%
      );
    }
    span.fang.bgc66 {
      background: linear-gradient(
        0deg,
        rgba(255, 117, 191, 0.6) 0%,
        rgba(253, 102, 146, 0.6) 100%
      );
    }
  }
}
.charts {
  width: 100%;
  height: calc(100% - 60px);
}
.dis {
  // display: inline-block;
  // width: 80px;
  // vertical-align: middle;
}
/*
  *常用电脑尺寸  1680 * 900
  *              1536 * 864
  *              1512 * 790
  *              1440 * 900
  *ipad pro      1366 * 1024
  *ipad mini     1024 * 768
  *ipad          1024 * 768
 */
/*分辨率低于1680，采用下面的样式*/
@media screen and (max-device-width: 1680px) {
}
/*分辨率低于1536，采用下面的样式*/
@media screen and (max-device-width: 1536px) {
  .bottom-text p span {
    font-size: 12px;
    margin: 0 4px;
  }
}
/*分辨率低于1440，采用下面的样式*/
@media screen and (max-device-width: 1440px) {
}
/*分辨率低于1366，采用下面的样式*/
@media screen and (max-device-width: 1366px) {
  .left {
    flex: 0 0 240px;
  }
}
/*分辨率低于1180，采用下面的样式*/
@media screen and (max-device-width: 1180px) {
  .bottom-text {
    font-size: 12px;
  }
  .target > div span {
    font-size: 12px;
  }
  .target > div span {
    font-size: 14px;
  }
  .long.el-select {
    width: 150px;
  }
  .long.el-select {
    width: 150px;
  }
  .long.el-select {
    width: 150px;
  }
  .long .el-input--suffix .el-input__inner {
    width: 150px;
  }
}
/*分辨率低于1024，采用下面的样式*/
@media screen and (max-device-width: 1024px) {
}
</style>
